<template>
  <div>
    <div>
      <div class="c-text-hidden theme-bg-gradient180 c-ph24 c-pb52">
        <img class="c-w100" :src="require('@/assets/i/wap/clockIn/rang_bg.png')" alt="" />
      </div>
      <div class="c-mt-116 c-p">
        <div class="c-flex-row c-aligni-center theme-bg-80 c-mlr-auto tab-style c-br-tl32 c-br-tr32 c-justify-sb c-ph24 c-pt24 c-pb54">
          <div class="c-p" :class="timeType==0?'c-fs28 c-fc-white c-fw-b':'c-fs-white08 c-fs24'" @click="clickChooseTime(0)">
            总榜
            <div class="iconfont icon-huaban item-border" v-show="timeType==0"></div>
          </div>
          <div class="c-p" :class="timeType==30?'c-fs28 c-fc-white c-fw-b':'c-fs-white08 c-fs24'" @click="clickChooseTime(30)">
            本月
            <div class="iconfont icon-huaban item-border" v-show="timeType==30"></div>
          </div>
          <div class="c-p" :class="timeType==-30?'c-fs28 c-fc-white c-fw-b':'c-fs-white08 c-fs24'" @click="clickChooseTime(-30)">上月
            <div class="iconfont icon-huaban item-border" v-show="timeType==-30"></div>
          </div>
          <div class="c-p" :class="timeType==7?'c-fs28 c-fc-white c-fw-b':'c-fs-white08 c-fs24'" @click="clickChooseTime(7)">本周
            <div class="iconfont icon-huaban item-border" v-show="timeType==7"></div>
          </div>
          <div class="c-p" :class="timeType==-7?'c-fs28 c-fc-white c-fw-b':'c-fs-white08 c-fs24'" @click="clickChooseTime(-7)">上周
            <div class="iconfont icon-huaban item-border" v-show="timeType==-7"></div>
          </div>
          <div class="c-p" :class="timeType==1?'c-fs28 c-fc-white c-fw-b':'c-fs-white08 c-fs24'" @click="clickChooseTime(1)">今日
            <div class="iconfont icon-huaban item-border" v-show="timeType==1"></div>
          </div>
          <div class="c-p" :class="timeType==-1?'c-fs28 c-fc-white c-fw-b':'c-fs-white08 c-fs24'" @click="clickChooseTime(-1)">昨日
            <div class="iconfont icon-huaban item-border" v-show="timeType==-1"></div>
          </div>
        </div>
      </div>
      <!-- <div class="c-pr8 c-pl16 c-pv4 c-br-tl24 c-br-bl24 c-fs22 theme-fc c-bg-white c-pa c-p-r0 c-p-t94" @click="clickBuildImg">
        分享
      </div> -->


      <div class="c-p c-pt36 c-fs24 c-flex-row c-aligni-center c-fc-sblack c-ph30 c-br-tl32  c-br-tr32 c-mt-30 c-bg-white">
        <span class="c-pr86">参与人数：{{myRankInfo.allNum}}</span>
        <div class="c-flex-row c-aligni-center c-fs24" v-show="selectList.length > 0">
          <popup-picker cancel-text="取消" confirm-text="确定" :themeColor="$getThemeColor()" class="selectPicker c-mr10" title="" style="c-w100" v-model="selectItem" :data="selectList" @on-change="clickChooseSort"></popup-picker>
          <span class="iconfont c-fs18 c-fc-gray c-rotate90">&#xe635;</span>
        </div>
        <!-- <div class="c-bg-white c-ww200 c-pa c-fs20 sort-box" v-show="showSortType">
          <div @click="clickChooseSort(1)" :class="sortType == 1 ? 'c-fc-sorange':''" class="c-ww200 c-hh60 c-flex-row c-flex-center">评分排行</div>
          <div @click="clickChooseSort(2)" :class="sortType == 2 ? 'c-fc-sorange':''" class="c-ww200 c-hh60 c-flex-row c-flex-center">被点赞排行</div>
          <div @click="clickChooseSort(3)" :class="sortType == 3 ? 'c-fc-sorange':''" class="c-ww200 c-hh60 c-flex-row c-flex-center">打卡次数排行</div>
          <div @click="clickChooseSort(4)" :class="sortType == 4 ? 'c-fc-sorange':''" class="c-ww200 c-hh60 c-flex-row c-flex-center">被评论数排行</div>
          <div @click="clickChooseSort(5)" :class="sortType == 5 ? 'c-fc-sorange':''" class="c-ww200 c-hh60 c-flex-row c-flex-center">邀请人数排行</div>
        </div> -->
        <div v-if="rankList&&rankList.length>0" class="c-ww44 c-hh44 c-textAlign-c theme-bg c-pa c-p-r154 c-brp50 c-lh44" @click="clickBuildImg">
          <i class="iconfont c-fs24 c-fc-white">&#xe89e;</i>
        </div>
        <div class="theme-bg c-fw600 c-pl24 c-pr20 c-pv8 c-br-tl24 c-br-bl24 c-fs22 c-fc-white border-rnone c-pa c-p-r0" @click="showDescription">
          榜单说明
        </div>
      </div>
      <div class="c-ph30 c-pb200 c-mt10">
        <div class="c-flex-row c-aligni-center c-fs24 c-pv20" @click="clickGoStudyHistory(item)" :class="index == rankList.length - 1 ? '':''" v-for="(item,index) in rankList" :key="index">
          <div class="img-rank-medal c-mr28" v-if="index <= 2">
            <img :src="require('@/assets/i/wap/clockIn/new'+ (index == 0 ? '1' : (index == 1 ? '2' : '3')) +'.png')" alt="" />
          </div>
          <div v-else class="c-mr28">{{index * 1 + 1}}</div>
          <img class="c-ww60 c-hh60 c-brp50" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="" />
          <span class="c-flex-grow1 c-w0 c-pl20 c-textAlign-l c-text-ellipsis1 c-fs26 c-fc-xblack">{{item.nickname || "未知"}}</span>
          <span class="theme-fc c-fs26 c-fw600">{{!item.result||item.result == 0 ?'--':sortType==1?Number(item.result).toFixed(2):item.result}}</span>
        </div>

        <loading-status-tem :noData="rankList.length==0" :dataStatus="dataStatus" noDataText="暂无数据"></loading-status-tem>
      </div>
    </div>
    <!-- 个人信息 -->
    <div class="c-pf c-p-l0 c-p-r0 c-p-b0 c-bg-white c-fs24 c-pv14 c-ph24 box-shadow04 c-flex-row c-aligni-center c-justify-sb">
      <div class="c-flex-row c-aligni-center">
        <div class="c-fs28 c-fw600 c-mr20">{{!myRankInfo.myRank||myRankInfo.myRank == 0 ?'--':myRankInfo.myRank}}</div>
        <img class="c-ww84 c-hh84 c-brp50 c-mr20" :src="$addXossFilter(myRankInfo.headimgurl, require('@/assets/defult_head.png'))" alt="" />
        <div>
          <div class="c-text-ellipsis1 c-fs28 c-ww240">{{myRankInfo.nickname}}</div>
          <div class="c-fs28 c-flex-row c-aligni-center">
            <div class="c-fc-gray c-mr10">{{sortType==1?'评分 :':sortType==2?'被点赞数 :':sortType==3?'打卡次数 :':sortType==4?'被评论数 :':sortType==5?'邀请人数 :':''}}</div>
            <div class="c-fs28 c-fw600 theme-fc">{{!myRankInfo.myResult||myRankInfo.myResult == 0 ?'--':sortType==1?Number(myRankInfo.myResult).toFixed(2):myRankInfo.myResult}}</div>
          </div>
        </div>
      </div>
      <div v-if="myRankInfo.showBtn" @click="clickGoClock" class="c-pv10 c-ph24 c-fs24 c-br25 c-flex-row c-flex-center c-fc-white theme-bg">我要参与</div>
    </div>
    <!-- <div class="c-pf c-p-l0 c-p-r0 c-p-b0 c-w100 c-hh190 c-pt80 c-flex-row c-flex-center" v-if="myRankInfo.isTeacher != 1 && myRankInfo.showBtn">
      <div @click="clickGoClock" class="c-ww540 c-fs24 c-hh64 c-br36 c-flex-row c-flex-center c-fc-white theme-bg-gradient">我要参与</div>
    </div> -->
    <cj-popup v-model="ListDescription" round closeable title="排行榜说明">
      <div class="c-flex-column c-bg-white c-pb40 c-br20 c-p c-ww480 c-text-hidden c-ph40 c-textAlign-c">
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt40 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>总排行榜</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">该打卡的总评分/总打卡次数/被总点赞次数/总被评论数/总邀请人数排名</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>本月排行榜</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">该打卡本月内的评分/打卡次数/被点赞次数/被评论数/邀请人数排名</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>上月排行榜</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">该打卡上个自然月内的评分/打卡次数/被点赞次数/被评论数/邀请人数排名</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>本周排行榜</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">该打卡本周内的评分/打卡次数/被点赞次数/被评论数/邀请人数排名</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>上周排行榜</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">该打卡上个自然周内的评分/打卡次数/被点赞次数/被评论数/邀请人数排名</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>今日排行榜</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">该打卡今日的评分/打卡次数/被点赞次数/被评论数/邀请人数排名</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-xblack c-mt20 c-fw-b"><div class="c-ww8 c-hh8 c-bg-sorange c-block c-brp50 c-mr12"></div>昨日排行榜</div>
        <div class="c-flex-row c-textAlign-l c-fs22 c-fc-sblack c-mt4 c-lh34 c-pl20">该打卡昨日的评分/打卡次数/被点赞次数/被评论数/邀请人数排名</div>
      </div>
    </cj-popup>
    <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker>
    <!-- 分享图 -->
    <div class="anvasBox">
      <div class="anvasContent" id="canvas1">
        <div v-if="rankList.length>0">
          <div class="bgLocation c-p">
            <div class="c-textAlign-c c-fc-white c-text-ellipsis1 rinkShareTittle" style="font-size: 22px;width: 294px;margin: 0px auto;letter-spacing: 2px;height: 40px;line-height: 36px;">
              {{myRankInfo.signName.length>12?myRankInfo.signName.substring(0, 12)+'...':myRankInfo.signName}}
            </div>
            <div class="" style="padding:40px 62px 0">
              <div class="c-flex-row c-aligni-center c-fc-xxlred" style="font-size:20px;border-bottom:2px solid #E8907C;padding-bottom:14px">
                <div>排名</div>
                <div class="c-flex-grow1" style="margin-left:70px">姓名</div>
                <div class="c-textAlign-c" style="width: 86px;">{{sortType==1?'评分':sortType==2?'被点赞数':sortType==3?'打卡次数':sortType==4?'被评论数':sortType==5?'邀请人数':''}}</div>
              </div>
              <div class="c-flex-row c-aligni-center" style="font-size:24px;padding:14px 0" v-for="(item,index) in rankList" v-if="index<5" :key="index">
                <img class="img-rank-canmedal" v-if="index == 0" :src="require('@/assets/i/wap/clockIn/first.png')" alt="" />
                <img class="img-rank-canmedal" v-else-if="index == 1" :src="require('@/assets/i/wap/clockIn/second.png')" alt="" />
                <img class="img-rank-canmedal" v-else-if="index == 2" :src="require('@/assets/i/wap/clockIn/third.png')" alt="" />
                <div v-else style="margin-left: 12px;margin-right: 36px">{{index * 1 + 1}}</div>
                <img class="c-brp50" style="width:30px;height:30px" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="" />
                <span class="c-flex-grow1 c-w0 c-textAlign-l c-text-ellipsis1 c-fc-xblack" style="font-size:20px;padding-left:14px;">{{item.nickname ? (item.nickname.length > 6 ? item.nickname.substring(0, 6) + '...' : item.nickname) : "未知"}}</span>
                <span class="c-fc-xblack c-textAlign-c" style="width: 84px;">{{!item.result||item.result == 0 ?'--':sortType==1?Number(item.result).toFixed(2):item.result}}</span>
              </div>
            </div>
          </div>
          <div class="c-pa" style="bottom:72px;left:0;right:0;margin:0 auto;">
            <img style="width:90px;height:90px;margin:0 auto;" :src="$addXossFilter(myRankInfo.qrcodeUrl, require('@/assets/defult270.png'))" alt="" />
            <div style="font-size:20px" class="c-textAlign-c c-fc-xxlred">扫码一起打卡吧</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分享图展示 -->
    <div v-show="isShowMasker" @click.stop="closeShowMasker" class="c-flex-row c-flex-center c-pf c-p-t0 c-p-l0 c-pz101 c-h c-w100 c-translucent-balck60">
      <div>
        <img @click.stop="clickImg" src="" class="c-w80 c-br8 c-m-0auto" id="spreadImg">
        <div class="c-fc-white c-fs24 c-mt20 c-textAlign-c">长按保存图片</div>
      </div>
    </div>
  </div>
</template>

<script>
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index';
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import shareMasker from "@/components/templates/common/shareMasker.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
let clockId = ''; //课程ID
let queType = 1; //课程ID
let html2canvas = null;
export default {
  name: "RankList",
  components: {
    loadingStatusTem,
    shareMasker,
    PopupPicker
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      isShowShare: false, //分享
      setScore: 2, //1 评分和点赞 2 只有点赞 3 课程排行
      showSortType: false, //显示排序
      sortType: 1, //排序方式
      myRankInfo: {
        isTeacher: 0,
        allNum: 0,
        headimgurl: '',
        nickname: '',
        myRank: '--',
        score: '--',
        myResult: '--',
        showBtn: false,
      },
      timeType: 0, //timeType 1 今日，-1 昨日，7 是本周，-7 上周，0 或者其他就是总榜
      rankList: [],
      ListDescription: false,
      isShowMasker:false,
      selectList: [["评分排行", "被点赞排行", "打卡次数排行", "被评论数排行", "邀请人数排行"]],
      selectItem:[],
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      html2canvas = res.default;
    })
  },
  methods: {
    //学习记录
    clickGoStudyHistory(item) {
      if (this.myRankInfo.isPrivate == 0 && this.myRankInfo.isDisCheat == 0) {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/studyHistory",
          query: {
            clockId: clockId,
            userId: item.userId,
            isMe: item.userId == this.myRankInfo.loginUserId ? true : false,
          }
        });
      }
    },
    clickImg(event) {
      event.preventDefault()
      return false
    },
    // 生成分享图
    clickBuildImg() {
      this.$loading.show({
        text: "分享图生成中"
      });
      document.ontouchstart = null;
      document.ontuchmove = null;
      document.ontouchend = null;
      this.$nextTick(() => {
        this.canvas();
      });
    },
    canvas() {
      let domTest = document.getElementById("canvas1");
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    canvasToImage(ctx) {
      try {
        // let dataURL = ctx.canvas.toDataURL("image/jpg");
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        let ig = document.getElementById("spreadImg");
        ig.src = dataURL;
        // document.getElementById("spreadImg").setAttribute("src", dataURL);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        setTimeout(() => {
          this.$loading.hide();
          this.isShowMasker = true;
        }, 1000);
      } catch (err) {
        this.$loading.hide();
      }
    },
    closeShowMasker() {
      this.isShowMasker = false;
    },
    showDescription() {
      this.ListDescription = true
    },
    clickGoClock() {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/clockInDetail",
        query: {
          clockInId: clockId
        }
      });
    },
    //选择排序
    clickChooseSort(value) {
      this.selectItem = value;
      // ["评分排行", "被点赞排行", "打卡次数排行", "被评论数排行", "邀请人数排行"]
      if (this.selectItem == '评分排行') {
        this.sortType = 1;
      } else if (this.selectItem == '被点赞排行') {
        this.sortType = 2;
      } else if (this.selectItem == '打卡次数排行') {
        this.sortType = 3;
      } else if (this.selectItem == '被评论数排行') {
        this.sortType = 4;
      } else if (this.selectItem == '邀请人数排行') {
        this.sortType = 5;
      }
      this.showSortType = false;
      pageIndex = 1;
      this.getRankList();
    },
    //选择时间tab
    clickChooseTime(type) {
      this.timeType = type;
      this.showSortType = false;
      pageIndex = 1;
      this.getRankList();
    },
    //获取排行榜
    getRankList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(
        global.apiurl + "signCard/rankingList/" + clockId + "?page=" + pageIndex + '&type=' + this.sortType +
        '&questionType=' + queType + '&timeType=' + this.timeType,
        res => {
          if (pageIndex == 1) {
            let info = {
              isTeacher: res.isTeacher,
              allNum: res.allNum,
              headimgurl: res.headimgurl,
              nickname: res.nickname,
              myRank: res.myrank,
              courseType: res.courseType,
              score: res.score,
              myResult: res.myResult,
              showBtn: res.showBtn,
              signName:res.signName,
              qrcodeUrl:res.qrcodeUrl,
              loginUserId:res.loginUserId,
              isPrivate:res.isPrivate,
              isDisCheat:res.isDisCheat
            }
            this.myRankInfo = info;
            this.rankList = res.rankList.data;
          } else {
            this.rankList = [...this.rankList, ...res.rankList.data];
          }
           if (res.rankList.data && (res.rankList.data < 10)) {
            this.dataStatus = pageIndex == 1 && res.rankList.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },

    initData() {
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.isShowShare = false;
      this.showSortType = false;
      this.rankList = [];
      this.selectItem = (this.selectList.length > 0 && [this.selectList[0][0]]) || []
    },
    //分享
    wechatShare: function () {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.wechatConfig(
        shareData.shareUrl,
        shareData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.rankList.length > 0) {
          this.getRankList();
        }
      });
    },
  },
  activated() {
    setDocumentTitle("排行榜");// eslint-disable-line
    this.initData();
    clockId = this.$route.query.clockId;
    queType = this.$route.query.type;
    this.setScore = this.$route.query.setScore;
    this.timeType = 0
    // if (this.setScore == 2) {
    //   this.sortType = 2;
    // } else if (this.setScore == 1) {
    //   this.sortType = 1;
    // } else {
    //   this.sortType = 3;
    // }

    this.getRankList();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.sort-box {
  right: 5.8rem;
  top: 2.2rem;
  box-shadow: 0 0 2px rgba(37, 37, 37, 0.1);
}

.img-rank-medal {
  width: 0.9rem;
  height: 1rem;
}

.img-rank-medal img{
  width: 100%;
}
.box-myinfo{
  margin-top: -3rem;
}
.box-shadow04{
  box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.04);
}
.c-p-t-36{
  top:-0.9rem;
}
.c-ww1{width: 1px;}
.border-rnone{
  border-right: 0;
}
.anvasBox{
  width: 640px;
  height: 772px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent{
  width: 468px;
  height: 770px;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/ringkShareBgNew.png");
  background-size: 100% 100%;
  position: relative;
}
.bgLocation {
  padding-top:178px
}
.rinkShareTittle{
   background: url("../../../assets/i/wap/clockIn/rinkShareTittle.png");
   background-size: 100% 100%;
}
.img-rank-canmedal{
  width: 20px;
  margin-right: 30px;
  margin-left: 10px;
}
.c-mt-116{
  margin-top: -2.9rem;
}
.c-fs-white08{
  color:rgba(255,255,255,0.8)
}
.c-pb54{
  padding-bottom: 1.35rem;
}
.item-border{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0.8rem;
  text-align: center;
}
.c-pb56{padding-bottom: 1.4rem;}
.c-mt-30{
  margin-top: -0.75rem;
}
.c-p-r154{right: 3.8rem;}
.selectPicker /deep/ .vux-cell-value{
  color: #666;
}
</style>
